<template>
    <div>
      <!-- 点击按钮，切换 isVisible 的值 -->
      <button type="button" @click='isVisible=!isVisible'>TOGGLE</button>
      <!-- 使用 transition 组件实现过渡效果，name 属性指定过渡的名称为 "v" -->
      <transition-group style="overflow: hidden; width: 300px;height: 100px;">
        <!-- 使用 v-show 控制该元素的显示和隐藏 -->
        <h1  v-show="isVisible" key="1" style="width: 300px;height: 50px;background-color: aqua;" >Hello, World!</h1>
        <h1  v-show="!isVisible" key="2" style="width: 300px;height: 50px;background-color: aqua;" >Hello, World!</h1>
      </transition-group>
    </div>
  </template>
  
  <script>
  export default {
    
    data() {
      return {
        // 定义一个 isVisible 变量，用来控制元素的显示和隐藏
        isVisible: false
      }
    },
    methods:{
  ck(){
  
  }
    }
  }
  </script>
  
  <style scoped>
  
  /* 定义过渡效果的样式 */
  /* 进入之前的状态 */
  .v-enter
  /* 离开之后的状态 */
  ,.v-leave-to{
    opacity: 0;
    transform:translate(-310px) ;
    
  }
  /* 进入之后的状态*/
  .v-enter-to
  /* 离开之前的状态 */
  ,.v-leave{
    opacity: 1;
    transform:translate(0px) ;
  }
  .v-enter-active,.v-leave-active{
    transition: opacity 1s ;
    
    transition:all 1s ;
  }
  
  /* scoped 属性指定样式只在该组件中生效 */
  </style>
  